﻿<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            font-size: 12px;
        }

        textarea {
            width: 400px;
            height: 150px;
            border-radius: 5px;
        }

        span {
            display: table;
        }

        .center {
            display: block;
            float: left;
        }
    </style>

</head>

<body>
    <div class="center">
        <select id="select_id" style="width:100px">
            <option value="sendMessage">发送消息</option>
            <!-- <option value="queryMessage">查询消息</option>
            <option value="updateMessageReadStatus">更新消息状态</option>
            <option value="deleteMessage">删除消息</option> -->
        </select>
        <input type="text" name="name" id="msg" class="call" />
        <input type="button" name="name" value="调用方法" class="call" />

        <span>消息</span>
        <div name="data" id="msgList"></div>

    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/main.js"></script>
    <script type="text/javascript">
        $(function () {

            msgTool.join(Date.parse(new Date()));
            $('.call').click(function () {
                var msg = $("#msg").val();

                var fnName = $("#select_id").val();

                msgTool[fnName](msg, function (data) {
                    $("#msgList").append(data + '<br/>');
                });
            });
        });

        msgTool.receiveMessageFn = function (data) {
            $("#msgList").append(data + '<br/>');

        };
    </script>
</body>

</html>